<template>
    <div>
        <div>
            <el-form inline :model="page" class="demo-form-inline" style="float: left">
                <el-form-item label="用户名称">
                    <el-input v-model="page.userName" placeholder="用户姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="userlist">查询</el-button>
                    <el-button type="primary" @click="dialogFormVisible = true">注册</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column prop="userName" label="用户名称">
                </el-table-column>
                <el-table-column prop="userPhone" label="手机号">
                </el-table-column>
                <el-table-column label="性别">
                    <template slot-scope="scope">
                        <span v-if="scope.row.userSex == 1">男</span>
                        <span v-else>女</span>
                    </template>
                </el-table-column>
                <el-table-column label="生日">
                    <template slot-scope="scope">
                        <span v-if="scope.row.userBirthday != null">{{
                            scope.row.userBirthday.replace("T", " ").substr(0, 19)
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="userAdressPC" label="地址">
                </el-table-column>
                <el-table-column prop="userDetailAddress" label="详细地址">
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                        <el-button @click="del(scope.row.id)" type="text" size="small">删除</el-button>
                        <el-button @click="updateonId(scope.row.id)" type="text" size="small">编辑</el-button>
                        <el-button @click="setup(scope.row.id)" type="text" size="small">设置角色</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="page.pageIndex" :page-sizes="[3, 6, 9, 12]" :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
            </el-pagination>
        </div>

        <div>
            <el-dialog title="注册" :visible.sync="dialogFormVisible">
                <create ref="create"></create>
                <div slot="footer" class="dialog-footer" :key="new Date().getTime()">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="register()">注册</el-button>
                </div>
            </el-dialog>
        </div>
        <div>
            <el-dialog title="编辑" :visible.sync="dialogFormVisible1">
                <update ref="update"></update>
                <div slot="footer" class="dialog-footer" :id="id" :key="new Date().getTime()">
                    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="updateadmin()">修改</el-button>
                </div>
            </el-dialog>
        </div>
        <div>
            <el-dialog title="设置用户角色" :visible.sync="dialogFormVisible2">
                <div slot="footer" class="dialog-footer">
                    <setup ref="setup" :id="id" :key="new Date().getTime()"></setup>
                    <el-button @click="dialogFormVisible2 = false">取消</el-button>
                    <el-button type="primary" @click="setUpRol">编辑</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { getInfo } from "@/api/user";
import { deluser } from "@/api/user";
import create from '../user/CreateAdmin.vue'
import update from '../user/UpdateAdmin.vue'
import setup from '../user/SetUp.vue'
export default {
    components: {
        create,
        update,
        setup,
    },
    data() {
        return {
            tableData: [],
            page: {
                pageIndex: 1,
                pageSize: 3,
                userName: ""
            },
            totalCount: 0,
            id: 0,
            dialogTableVisible: false,
            dialogFormVisible: false,
            dialogTableVisible1: false,
            dialogFormVisible1: false,
            dialogTableVisible2: false,
            dialogFormVisible2: false,
        }
    },
    methods: {
        userlist() {
            getInfo(this.page).then(res => {
                this.tableData = res.data
                this.totalCount = res.totalCount
            })
        },
        del(id) {
            deluser(id).then(res => {
                if (res) {
                    this.$message.success("删除成功")
                    this.userlist()
                } else {
                    this.$message.error("删除失败")
                }
            })
        },
        updateonId(id) {
            this.id = id
            this.dialogFormVisible1 = true;
            this.$refs.update.getAdminid();
        },
        updateadmin() {
            this.$refs.update.eidt("form");
            this.dialogFormVisible1 = false;
        },
        setup(id) {
            this.id = id
            this.dialogFormVisible2 = true;
        },
        setUpRol() {
            this.$refs.setup.setUpRoles("form");
            this.dialogFormVisible2 = false;
        },
        handleSizeChange(val) {
            this.page.pageSize = val
            console.log(`每页 ${val} 条`);
            this.userlist()
        },
        handleCurrentChange(val) {
            this.page.pageIndex = val
            console.log(`每页 ${val} 条`);
            this.userlist()
        },
        //注册
        register() {
            this.$refs.create.register("form");
        },
    },
    created() {
        this.userlist()
    }
}
</script>